<template>
	<div>
		<el-card class="layout-search-card mb-4" shadow="never" :body-style="{ paddingBottom: '0' }">
			<el-form :model="state.queryParams" ref="queryForm" :inline="true">
				<el-form-item label="角色名称：">
					<el-input v-model="state.queryParams.name" placeholder="请输入角色名称" class="w-180"> </el-input>
				</el-form-item>
				<el-form-item label="状态">
					<el-select class="w-[150px]" v-model="state.queryParams.disable">
						<el-option label="全部" value="" />
						<el-option label="正常" value="0" />
						<el-option label="禁用" value="1" />
					</el-select>
				</el-form-item>
				<el-form-item>
					<el-button-group>
						<el-button type="primary" icon="ele-Search" @click="searchTable"> 查询 </el-button>
						<el-button icon="ele-Refresh" @click="resetQuery" class="ml15"> 重置 </el-button>
					</el-button-group>
				</el-form-item>
			</el-form>
		</el-card>
		<el-card class="layout-table-card" shadow="never">
			<el-button size="default" v-auth="'auth/role/add'" type="primary" class="mb-4" @click="handleAdd()"> 添加角色 </el-button>
			<el-table :data="state.tableList" v-loading="state.loading">
				<el-table-column prop="id" label="ID" width="60" />
				<el-table-column prop="name" label="角色名称" show-overflow-tooltip></el-table-column>
				<el-table-column prop="describe" label="角色描述" show-overflow-tooltip></el-table-column>
				<el-table-column prop="sort" label="排序" show-overflow-tooltip></el-table-column>
				<el-table-column prop="status" label="状态" show-overflow-tooltip>
					<template #default="{ row }">
						<el-tag type="danger" v-if="row.disable">{{ row.disable_desc }}</el-tag>
						<el-tag type="success" v-else>{{ row.disable_desc }}</el-tag>
					</template>
				</el-table-column>
				<el-table-column prop="create_time" label="创建时间" show-overflow-tooltip></el-table-column>
				<el-table-column label="操作" width="100">
					<template #default="{ row }">
						<el-button size="small" v-auth="'auth/role/edit'" text type="primary" @click="handleEdit(row)">编辑</el-button>
						<el-button v-if="row.root !== 1" size="small" v-auth="'auth/role/delete'" text type="primary" @click="handleDelete(row.id)">删除</el-button>
					</template>
				</el-table-column>
			</el-table>
			<div class="flex justify-end mt-4">
				<pagination v-model="state" @tableChange="getTableList" />
			</div>
		</el-card>
		<EditDialog v-if="showDialog" ref="editRef" @submit="getTableList" @close="showDialog = false" />
	</div>
</template>

<script setup lang="ts" name="authRoleList">
import { reactive, onMounted, ref, nextTick } from 'vue';
import { messageBox } from '/@/utils/message';
import { roleLists, roleDelete } from '/@/api/auth/role';
import { usePage } from '/@/hooks/usePage';
import EditDialog from '/@/views/auth/role/component/edit.vue';

const editRef = ref();

const showDialog = ref(false);

// 定义列表
const state = reactive<TableDataState>({
	loading: false,
	tableList: [],
	queryParams: {
		account: '',
		name: '',
		disable: '',
	},
	tableParams: {
		page_num: 1,
		page_limit: 15,
		page_total: 0 as any,
	},
});

const { getTableList, searchTable, resetQuery } = usePage({ tableData: state, apiData: roleLists });

// 添加角色
const handleAdd = async () => {
	showDialog.value = true;
	nextTick(() => {
		editRef.value?.open('add');
	});
};

// 编辑角色
const handleEdit = async (row: any) => {
	showDialog.value = true;
	nextTick(() => {
		editRef.value?.setFormData(row, () => {
			editRef.value?.open('edit');
		});
	});
};

// 删除角色
const handleDelete = async (id: number) => {
	messageBox(`确定要删除角色吗？`).then(async () => {
		await roleDelete({ id: id });
		getTableList();
	});
};

onMounted(() => {
	getTableList();
});
</script>
